<template>
  <view class="serve-verify">
    <view v-for="(item, key) in goods" :key="key">
      <view class="status" v-if="item.service_status == 3">已核销</view>

      <view class="card server-store">
        <view class="label">服务门店</view>
        <view class="content">
          <view class="img">
            <image :src="$wanlshop.oss(item.store.store_avatar, 0, 88)" />
          </view>
          <view class="info">
            <view class="name">{{ item.store.store_name || "" }}</view>
            <view class="address">{{ item.store.address || "" }}</view>
            <view class="tags">
              <view
                class="tag"
                @tap="$wanlshop.phone(item.store.store_phone || '')"
                >电话</view
              >
              <view class="tag" @tap="shopMap(item.store)">导航</view>
            </view>
          </view>
        </view>
      </view>

      <view class="card store-product">
        <view class="store">
          <view class="img">
            <image :src="$wanlshop.oss(item.image, 0, 88)" />
          </view>
          <view class="info-pice">
            <view class="name-pice">
              <view class="name">{{ item.title }}</view>
              <view class="pice">{{ item.price }}</view>
            </view>
            <view class="info">
              <view class="text">{{ item.difference }}</view>
              <view class="num">x{{ item.number }}</view>
            </view>
            <view class="tags">
              <view
                class="tag"
                v-for="(tag, index) in (item.store.tag || '').split(',')"
                :key="index"
              >
                {{ tag }}
              </view>
            </view>
          </view>
        </view>
        <view class="product">
          <view class="img">
            <!-- {{ item.store_service.show_image }} -->
            <image :src="$wanlshop.oss(item.store_service.show_image, 0, 88)" />
          </view>
          <view class="info-pice">
            <view class="name-pice">{{ item.store_service.name }}</view>
          </view>
        </view>
        <view
          class="server"
          v-for="(child, childKey) in technicianList(
            item.showMore,
            item.technicians
          )"
          :key="childKey"
        >
          <view class="img">
            <image :src="$wanlshop.oss(child.avatar_img || '', 0, 88)" />
          </view>
          <view class="info-pice">
            <view class="name-pice">
              {{ child.name }}
            </view>
          </view>
          <view class="chose" @tap="selectTechnicians(key, childKey)">
            {{ child.select }}
          </view>
        </view>
        <view class="show-more" @tap="showMore(key)">{{
          goods[key].showMore ? "收起" : "选择更多技师"
        }}</view>
      </view>

      <view class="card rules">
        <view class="label-text order-num">
          <view class="label">订单编号：</view>
          <view class="text">
            <text>{{ item.order_no }}</text>
            <view class="copy" @tap="copyOrder(item.order_no)">复制</view>
          </view>
        </view>
        <view class="label-text">
          <view class="label">订单时间：</view>
          <view class="text">
            <!-- <text>{{  }}</text> -->
          </view>
        </view>
        <view class="label-text">
          <view class="label">购买产品：</view>
          <view class="text">
            <text>{{ item.title }}</text>
          </view>
        </view>
        <!-- <view class="label-text">
        <view class="label">支付方式：</view>
        <view class="text">
          <text>xxxxxxxxx</text>
        </view>
      </view> -->
        <view class="label-text">
          <view class="label">支付状态：</view>
          <view class="text">
            <text>{{ status }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="submit" v-if="goods[0].service_status != 3">
      <button @tap="serviceValidation">确认核销</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderId: "",
      serverStore: {
        address: "",
        shopname: "",
      },
      goods: [],
      technicians: [],
    };
  },
  onLoad(options) {
    console.log(options);
    if (options.id) {
      this.orderId = options.id;
      this.getOrderApi(options.id).then(() => this.getTechnicians());
    }
  },
  computed: {
    technicianList() {
      return (showMore = false, list = []) => {
        if (!showMore) {
          return [list[0]];
        }
        return list;
      };
    },
  },
  methods: {
    async getOrderApi(order_id) {
      let res = await this.$api.get({
        url: "/wanlshop/order/getOrderInfo",
        data: {
          id: order_id,
        },
      });
      this.serverStore = {
        shopname: res?.shop?.shopname || "",
        address: res?.address?.address || "",
      };
      this.goods = res.goods.map((item) => {
        return {
          ...item,
          showMore: false,
          technicians: [],
        };
      });
      return;
    },
    async getTechnicians() {
      if (this.goods.length) {
        let ids = this.goods.map((item) => item.store.id).join();
        let data = await this.$api.get({
          url: "/wanlshop/store/staff",
          data: {
            id: ids,
          },
        });
        console.log(data);
        this.goods = this.goods.map((item, index) => {
          return {
            ...item,
            showMore: false,
            technicians: (data || [])
              .filter((child) => child.store_id === item.store.id)
              .map((child, key) => {
                return {
                  ...child,
                  select: key === 0 && index === 0,
                };
              }),
          };
        });
      }
    },
    async serviceValidation() {
      let service_code = this.goods.map((item) => item.service_code).join();
      let store_staff_id = this.goods
        .map((item) => {
          return item.technicians;
        })
        .flat()
        .filter((item) => item.select)
        .map((item) => item.id)
        .join();
      console.log(service_code, store_staff_id);
      let data = await this.$api.post({
        url: "/wanlshop/store/serviceValidation",
        data: {
          store_staff_id: store_staff_id,
          service_code: service_code,
        },
      });
      await this.getOrderApi(this.orderId).then(() => this.getTechnicians());
    },
    showMore(index) {
      this.goods[index].showMore = !this.goods[index].showMore;
      this.goods[index].technicians = this.goods[index].technicians.sort(
        (a, b) => (b.select > a.select ? -1 : 1)
      );
    },
    selectTechnicians(index, key) {
      this.goods = this.goods.map((item) => {
        return {
          ...item,
          technicians: item.technicians.map((child) => {
            return {
              ...child,
              select: false,
            };
          }),
        };
      });
      this.goods[index]["technicians"][key]["select"] = true;
    },
    shopMap(store) {
      let { address, store_name, latitude, longitude } = store;
      let data = {
        name: store_name,
        addr: address,
        latitude: latitude,
        longitude: longitude,
      };
      let str = Object.keys(data)
        .map((key) => {
          return `${key}=${data[key]}`;
        })
        .join("&");
      this.$wanlshop.to(`/pages/service/select_shop_map?${str}`);
    },
  },
};
</script>

<style scoped lang="scss">
.serve-verify {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 0 15rpx;

  .status {
    height: 28px;
    text-align: center;
    font-family: PingFang SC;
    font-size: 20px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    color: #fe8c00;
  }
  .server-store {
    .label {
      width: 56px;
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: normal;
      line-height: normal;
      text-align: center;
      letter-spacing: 0px;
      font-variation-settings: "opsz" auto;
      /* 字体标准黑色 */
      color: #3d3d3d;
      margin-bottom: 7px;
    }
    .content {
      display: flex;
      align-items: center;
      .img {
        width: 59px;
        height: 59px;
        background: #d8d8d8;
        border-radius: 4px;
        margin-right: 12px;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        height: 100%;
        .name {
          font-family: PingFang SC;
          font-size: 13px;
          font-weight: normal;
          line-height: normal;
          text-align: center;
          letter-spacing: 0px;

          font-variation-settings: "opsz" auto;
          /* 字体标准黑色 */
          color: #3d3d3d;
        }
        .address {
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0em;
          font-variation-settings: "opsz" auto;
          /* 次要信息 */
          color: #bcbcbc;
          margin: 5px 0 10px 0;
        }
        .tags {
          display: flex;
          align-items: center;
          .tag {
            padding: 2px 5px;
            border-radius: 4px;
            opacity: 1;

            box-sizing: border-box;
            border: 0.6px solid #4d3827;
            margin-right: 1px;
            font-family: PingFang SC;
            font-size: 10px;
            font-weight: normal;
            line-height: normal;
            letter-spacing: 0em;

            font-variation-settings: "opsz" auto;
            color: #3d3d3d;

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
  .store-product {
    .store,
    .product,
    .server {
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 0.5px solid #e8e8e8;
      .img {
        width: 78px;
        height: 76px;
        border-radius: 4px;
        opacity: 1;
        background: #d8d8d8;
        margin-right: 10px;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .info-pice {
        height: 100%;
        flex: 1;
        .name-pice {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .name {
            font-family: PingFang SC;
            font-size: 13px;
            font-weight: normal;
            line-height: normal;
            letter-spacing: 0em;

            font-variation-settings: "opsz" auto;
            color: #3d3d3d;
          }
          .pice {
            font-family: PingFang SC;
            font-size: 15px;
            font-weight: normal;
            line-height: normal;
            letter-spacing: 0em;

            font-variation-settings: "opsz" auto;
            /* 字体标准黑色 */
            color: #3d3d3d;
          }
        }
        .info {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .text {
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: normal;
            line-height: normal;
            letter-spacing: 0em;

            font-variation-settings: "opsz" auto;
            /* 次要信息 */
            color: #bcbcbc;
          }
          .num {
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: normal;
            line-height: normal;
            font-variation-settings: "opsz" auto;
            color: #6a6a6a;
          }
        }
        .tags {
          display: flex;
          align-items: center;
          .tag {
            border-radius: 12px;

            /* 卡片阴影 */
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
            font-family: PingFang SC;
            font-size: 10px;
            font-weight: normal;
            line-height: normal;
            letter-spacing: 0em;

            font-variation-settings: "opsz" auto;
            color: #fe8c00;
            padding: 2px 3px;
          }
        }
      }
    }
  }

  .rules {
    .label-text {
      display: flex;

      &.order-num {
        align-items: center;

        .text {
          align-items: center;
          display: flex;

          .copy {
            margin-left: 20rpx;
            font-size: 18rpx;
            background: rgba(#999, 0.5);
            padding: 3rpx 8rpx;
            border-radius: 5rpx;
            color: #333;
          }
        }
      }

      .label,
      text {
        line-height: 40rpx;
        color: #000;
        font-size: 24rpx;
      }
    }
  }

  .show-more {
    margin-top: 20px;
    text-align: center;
    font-family: PingFang SC;
    font-size: 11px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0em;

    font-variation-settings: "opsz" auto;
    color: #9e9e9e;
  }
}
.card {
  padding: 10px 16px;
  width: 355px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
  // background: #fff;
  // border-radius: 10rpx;
  // padding: 10px 16px;
  // margin-bottom: 20rpx;
}
.submit {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  button {
    width: 100%;
    height: 38px;
    line-height: 38px;
    border-radius: 12px;
    opacity: 1;

    background: #ffffff;

    /* 卡片阴影 */
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
    border-radius: 197px;
    opacity: 1;
    background: #fd8c01;
    margin: 0 26px;
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0em;

    font-variation-settings: "opsz" auto;
    color: #ffffff;
  }
}
</style>
